<template>
  <div>
    <el-select
       multiple
        collapse-tags
       clearable
       style="width:180px;"
       v-model="sellerIds"
       filterable
       remote
       reserve-keyword
       @change="selectSeller"
       :placeholder="placeholder"
       :remote-method="remoteMethod"
       :loading="loading"
     >
       <el-option v-for="item in platformSeller" :key="item.id" :label="item.name" :value="item.id"></el-option>
     </el-select>
  </div>
</template>

<script>
  /**
   * selectSeller 选择酒店组件
   * @description 选择酒店组件
   * @property {Number} index 子组件的唯一标识 ，点击gird会返回当前的标识
   */
  export default {
  	name: 'selectSeller',
  	props: {
  		placeholder: {
  			type: String,
  			default: "商家名称"
  		}
  	},
  	data() {
  		return {
  			loading:false,
        platformSeller:[],
        sellerIds:[]
  		}
  	},
  	created() {
  		this.init();
  	},
  	methods: {
  		init(){
        this.remoteMethod();
      },
      //加载平台商家数据
      remoteMethod(query) {
        if(this.isAuth('hotel:hotelseller:list')){
          this.loading = true;
          this.$http({
            url: this.$http.adornUrl("/hotel/hotelseller/platformSeller"),
            method: "get",
            params: this.$http.adornParams({
              sellerName: query
            })
          }).then(({ data }) => {
            this.loading = false;
            if (data && data.code === 0) {
              this.platformSeller = data.page.list;
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      },
      selectSeller(value) {
        console.log("选择酒店值",value)
        // this.getDataList()
        this.$emit('change', value);
      },
  	}
  }
</script>

<style lang="scss" scoped>
</style>
